<script setup lang="ts">
import {Ref, ref} from "vue";
import {useRouter} from 'vue-router'
import weijiandang from '@/assets/appimg/weijiandang.png';
import addimg from '@/assets/appimg/add_btn.png';
import nvshi from '@/assets/appimg/nvshi.png';
import {showToast} from "vant";
import {showImagePreview} from 'vant';
import ReportImgDalog from "@/views/app/ReportImgDalog.vue";
import ReportPdfDalog from "@/views/app/ReportPdfDalog.vue";

const router = useRouter()

function onClickLeft() {
  if (null==window.MyChannel){
    router.back()
  }else{
    var pagestr={
      type:1,
      data:"退出吧"
    }
    window.MyChannel.postMessage(JSON.stringify(pagestr));
  }
}

function showImg() {
  showImagePreview([
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    'http://gips3.baidu.com/it/u=1821127123,1149655687&fm=3028&app=3028&f=JPEG&fmt=auto?w=720&h=1280'
  ]);
}

const buttonShow = ref(true);
const buttonShow2 = ref(false);

const showDialog = ref(false)
function reportClick() {
  showDialog.value = !showDialog.value;
}
</script>

<template>
<!--  <report-img-dalog v-if="showDialog" @close="showDialog = false" />-->
   <report-pdf-dalog v-if="showDialog" @close="showDialog = false" />
  <div class="spd_page">
    <van-nav-bar
        title="服务人员详情"
        left-text=""
        left-arrow
        @click-left="onClickLeft"
    />


    <div class="spd_body">
      <div class="tuijian">
<!--        <div class="tuijian1">-->
<!--          <img src="@/assets/appimg/tuijian.png" class="tuijian1_img">-->
<!--          <span style="width: 3px;"></span>-->
<!--          <span>被推荐</span>-->
<!--          <span style="font-size: 20px;color: #947031;font-weight: bold;">300</span>-->
<!--          <span style="color: #947031;">次</span>-->
<!--        </div>-->
        <div style="font-size: 12px;color: #947031;">NO.JY00000000000000</div>
      </div>
      <div class="spd_body1">
        <div class="jieshao">
          <div class="jieshao1">
            <img :src="nvshi" class="jieshao1_img">
            <div class="jieshao1_right">
              <div class="jieshao1_right_row1">张女士</div>
              <div class="jieshao1_right_row2">
                <span>8年以上经验</span>
                <span style="width: 12px;text-align: center;">|</span>
                <span style="">服务999+客户</span>
              </div>
              <div class="jieshao1_right_row3"></div>
            </div>
          </div>
          <div class="jieshao2">
            <div class="jieshao2_row1">
              <span style="margin-left: 10px;">内蒙古人&nbsp;&nbsp;38岁&nbsp;&nbsp;本科&nbsp;&nbsp;虎&nbsp;&nbsp;巨蟹座&nbsp;&nbsp;汉族</span>
              <span style="color: #B51C21B2;font-weight: bold;margin-left: 20px;" @click="reportClick">体检报告></span>
            </div>
            <div class="jieshao2_row1">
              <span class="jieshao2_row1_span">英语4级</span>
              <span class="jieshao2_row1_span">普通话</span>
              <span class="jieshao2_row1_span">四川话良好</span>
              <span class="jieshao2_row1_span">手脚勤快</span>
            </div>
          </div>
        </div>
<!--        <div class="qiuzhiyixiang_title">档期时间</div>-->
<!--        <div class="dangqi">2025.07.23</div>-->
        <div class="qiuzhiyixiang_title">求职意向</div>
        <div class="gz_xz">
          <div class="gz">
            <div>工种：</div>
            <div>家员私厨</div>
          </div>
          <div class="xz">
            <div class="xz_child1">60000-8000</div>
            <div class="xz_child2">/月*14薪</div>
          </div>
        </div>
        <div class="gznr">
          <span class="gznr_child1">工作内容：</span>
          <span
              class="gznr_child2">接孩子、家庭五口一日三餐、整理房间、清洁房间、开车接孩子上下学、剩下就是产品文档了。接孩子、家庭五口一日三餐、整理房间、清洁房间、开车剩下就是产品文档了。</span>
        </div>
        <div class="dingwei">
          <img src="@/assets/appimg/dingwei.png">
          <span style="font-size: 14px;color: #191919;">北京市海淀区 可随行</span>
        </div>
        <div class="qzyx_bq">
          <div class="qzyx_bqhcild1">白班</div>
          <div class="qzyx_bqhcild1">xx区</div>
          <div class="qzyx_bqhcild1">全职</div>
        </div>
        <div class="sczs">
          <div class="sczs_child1">所持证书</div>
          <div class="sczs_child2" @click="showImg">
            <div class="sczs_child2_1" v-for="(item, index) in 5">
              <img src="@/assets/appimg/zhengshu.png" class="sczs_child2_1_img">
              <div class="sczs_child2_1_text">育儿证</div>
            </div>
          </div>
        </div>

      </div>


      <div class="guanyuwo">
        <div class="qiuzhiyixiang_title2">关于我</div>
        <div class="zwjs" style="font-weight: bold;">自我介绍</div>
        <div class="zwjs_nr">内蒙古人，能做家庭餐、做家务，能够独自整理收纳家务、熨烫衣服。为人性格开朗，干净利索。</div>
        <div class="zwjs" style="font-weight: bold;font-size: 14px;">家庭情况</div>
        <div class="zwjs_nr">
          <div><span style="font-weight: bold;color:#191919;font-size: 14px;">婚姻:</span> <span
              style="font-size: 14px;font-weight: normal;">已婚已育 5口人</span></div>
          <div><span style="font-weight: bold;color:#191919;font-size: 14px;">子女:</span> <span
              style="font-size: 14px;font-weight: normal;"> 一个 男孩、上初三</span></div>
          <div><span style="font-weight: bold;color:#191919;font-size: 14px;">老人:</span> <span
              style="font-size: 14px;font-weight: normal;">两位老人，70岁左右</span></div>
        </div>
        <div class="zwjs" style="font-weight: bold;">其他</div>
        <div class="zwjs_nr">
          <div><span style="font-weight: bold;color:#191919; font-size: 14px;">居住地址:</span> <span
              style="font-size: 14px;font-weight: normal;">北京市西城区二七北路23号</span></div>
          <div><span style="font-weight: bold;color:#191919;font-size: 14px;">禁忌内容:</span> <span
              style="font-size: 14px;font-weight: normal;">希望雇主没有民族歧视、地域歧视。</span></div>
          <div><span style="font-weight: bold;color:#191919;font-size: 14px;">宗教信仰：</span><span
              style="font-size: 14px;font-weight: normal;">基督教</span></div>
        </div>
      </div>


      <div class="guanyuwo">
        <div class="qiuzhiyixiang_title2">经纪人推荐</div>
        <div style="height: 10px;"></div>
        <div class="zwjs_nr">有爱心、有责任心、做事细心、尽心尽力。</div>
        <div style="height: 10px;"></div>
        <div class="qiuzhiyixiang_title2">雇主评价</div>
        <div style="height: 10px;"></div>
        <div class="zwjs_nr">有爱心、有责任心、做事细心、尽心尽力。</div>
      </div>
      <div class="guanyuwo">
        <div class="gzjl">
          <div class="qiuzhiyixiang_title2">工作经历</div>
          <div>更多></div>
        </div>

        <div class="zwjs"><span style="font-weight: bold;font-size: 14px;">工种:</span><span
            style="font-size: 14px;font-weight: normal;"> 管家</span></div>
        <div class="zwjs2">
          <div style="font-weight: bold;font-size: 14px;">工作内容:</div>
          <div style="font-size: 14px;font-weight: normal;">
            接孩子、家庭五口一日三餐、整理房间、
            清洁房间、开车接孩子上下学、剩下就是产品文档了。
            接孩子、家庭五口一日三餐、整理房间、清洁房间、开车剩下就是产品文档了。
            工作属性: 2023年6月20日-2024年8月30日
            客户评价: 超爱心、责任心、做事细心、尽心尽力
          </div>
        </div>
        <div class="zwjs2">
          <div style="font-weight: bold;font-size: 14px;">雇主评价:</div>
          <div style="font-size: 14px;font-weight: normal;">
            超爱心、责任心、做事细心、尽心尽力
          </div>
        </div>
      </div>
      <div style="width: 100%;height:100px;"></div>
    </div>


<!--    <div class="foot_box">-->
<!--      <div class="tuidan" v-if="buttonShow">记录</div>-->
<!--      <div class="tuidan" v-if="buttonShow2">锁定</div>-->
<!--      <div class="tuidan" v-if="buttonShow">取消锁定</div>-->
<!--      <div class="tuidan2" v-if="buttonShow2">完善信息</div>-->
<!--      <div class="tuidan2" v-if="buttonShow">推荐</div>-->
<!--      <div class="dadianhua" v-if="buttonShow">拨打电话</div>-->
<!--      <div class="dadianhua" v-if="buttonShow2">预约锁定</div>-->

<!--      <div class="buttons">-->
<!--        <div class="hetong" v-if="buttonShow2">建档</div>-->
<!--        <div class="hetong2" v-if="buttonShow2">-->
<!--          <div>建档</div>-->
<!--          <div class="dqs">待支付</div>-->
<!--        </div>-->
<!--        <div class="hetong" v-if="buttonShow2">发起委托协议</div>-->
<!--        <div class="hetong2" v-if="buttonShow">-->
<!--          <div>发起委托协议</div>-->
<!--          <div class="dqs">待签署</div>-->
<!--        </div>-->


<!--      </div>-->
<!--    </div>-->


  </div>

</template>

<style scoped lang="less">
::v-deep(.van-tabs__line) {
  background-color: #ff0000 !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}


html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}


.spd_page {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  background-color: #FBFBFB; //#B5B5B5;//


  .spd_body {
    overflow-y: auto;
    background-image: url('@/assets/appimg/fwry_bg.png');

    .tuijian {
      height: 50px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding-left: 15px;
      padding-right: 15px;

      .tuijian1 {
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: center;

        .tuijian1_img {
          height: 20px;
          width: 20px;
        }
      }
    }

    .spd_body1 {
      display: flex;
      flex-direction: column;
      border-radius: 3px;
      margin-left: 10px;
      margin-right: 10px;
      padding-bottom: 10px;
      background-color: white;

      .jieshao {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;


        .jieshao1 {
          box-sizing: border-box;
          display: flex;
          flex-direction: row;
          padding-top: 8px;

          .jieshao1_img {
            height: 50px;
            width: 50px;
            margin-top: 8px;
            margin-left: 8px;
          }

          .jieshao1_right {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            flex: 1;
            padding-right: 10px;

            .jieshao1_right_row1 {
              box-sizing: border-box;
              font-size: 16px;
              color: black;
              margin-left: 8px;
              font-weight: bold;
            }

            .jieshao1_right_row2 {
              box-sizing: border-box;
              display: flex;
              flex-direction: row;
              justify-content: start;
              align-items: center;
              margin-left: 8px;
              margin-top: 10px;
              box-sizing: border-box;
            }

            .jieshao1_right_row3 {
              box-sizing: border-box;
              height: 1px;
              width: 100%;
              background-color: #B5B5B5;
              margin-left: 8px;
              margin-top: 8px;
            }
          }
        }

        .jieshao2 {
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          margin-top: 10px;

          .jieshao2_row1 {
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;

            .jieshao2_row1_span {
              box-sizing: border-box;
              margin-top: 10px;
              background-color: #D1D3D5;
              border-radius: 3px;
              margin-left: 10px;
              padding: 2px;
              font-size: 14px;
            }
          }
        }

      }

      .dangqi {
        font-size: 14px;
        color: #191919;
        margin-left: 10px;
        margin-top: 10px;
      }

      .gz_xz {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        margin-top: 10px;
        padding-left: 10px;
        padding-right: 10px;

        .gz {
          display: flex;
          flex-direction: row;
          justify-content: start;

          &:nth-child(1) {
            color: #191919;
            font-weight: bold;
          }

          &:nth-child(2) {
            color: #191919;
            font-weight: bold;
          }
        }

        .xz {
          display: flex;
          flex-direction: row;
          justify-content: end;
          align-items: end;
          color: #B51C21;

          .xz_child1 {
            font-weight: bold;
            font-size: 14px;
          }

          .xz_child2 {
            font-size: 10px;
          }
        }
      }

      .gznr {
        margin-top: 8px;
        padding-left: 10px;
        padding-right: 10px;

        .gznr_child1 {
          font-size: 14px;
          font-weight: bold;
          color: #191919;
        }

        .gznr_child2 {
          font-size: 14px;
          color: #191919;
        }
      }

      .dingwei {
        display: flex;
        flex-direction: row;
        margin-top: 10px;
        padding-left: 10px;

        img {
          width: 20px;
          height: 20px;
        }
      }

      .qzyx_bq {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: center;
        padding-top: 10px;
        margin-left: 10px;

        .qzyx_bqhcild1 {
          color: #191919;
          background-color: #947031;
          border-radius: 3px;
          padding-left: 3px;
          padding-right: 3px;
          padding-top: 2px;
          padding-bottom: 2px;
          border: 1px #947031;
          margin-right: 10px;
        }
      }

      .sczs {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: 20px;
        margin-left: 10px;

        .sczs_child1 {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          color: #191919;
          font-size: 14px;
          font-weight: bold;

        }

        .sczs_child2 {
          display: flex;
          flex-direction: row;
          align-items: center;
          margin-top: 10px;
          overflow-x: auto;
          width: 100%;

          .sczs_child2_1 {
            flex-shrink: 0;
            width: 160px;
            height: 90px;
            border: 5px solid #9ED0E6;
            border-radius: 10px;
            text-align: center;
            font-family: sans-serif;
            background-color: #f9f9f9;
            margin-right: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .sczs_child2_1_img {
              width: 30px;
              height: 30px;
            }

            .sczs_child2_1_text {
              margin-top: 10px;
            }
          }

          .sczs_child2_2 {
            flex: 1;

            .sczs_child2_2_img {
              height: 30px;
              width: 30px;
            }
          }
        }
      }
    }

    .guanyuwo {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: start;
      border-radius: 3px;
      margin-left: 8px;
      margin-right: 8px;
      margin-top: 10px;
      padding-top: 10px;
      padding-bottom: 10px;
      background-color: white;
      font-size: 14px;

      & > div {
        font-size: 14px;
      }

      .zwjs {
        font-size: 14px;
        font-weight: bold;
        color: #191919;
        margin-top: 10px;
        padding-left: 8px;
      }
      .zwjs2{
        font-size: 14px;
        font-weight: bold;
        color: #191919;
        margin-top: 10px;
        padding-left: 8px;
      }
      .zwjs_nr {
        font-size: 14px;
        color: #191919;
        margin-top: 5px;
        padding-left: 8px;
      }

      .gzjl {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        //.gzjl1{
        //  position: absolute;
        //  left: 0;
        //}
        //.gzjl2{
        //  position: absolute;
        //  right: 0;
        //}
      }
    }

    .jingjirentuijian {
      height: 200px;
      width: 200px;
      background-color: red;
    }

  }

  .qiuzhiyixiang_title {
    box-sizing: border-box;
    font-size: 14px;
    color: black;
    font-weight: bold;
    background: linear-gradient(to right, #F89596, #FFFFFF);
    //background-image: url('@/assets/appimg/biaoti.png');
    padding-left: 10px;
    padding-right: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
    width: 80px;
    margin-top: 20px;
  }

  .qiuzhiyixiang_title2 {
    box-sizing: border-box;
    font-size: 14px;
    color: black;
    font-weight: bold;
    background: linear-gradient(to right, #F89596, #FFFFFF);
    //background-image: url('@/assets/appimg/biaoti.png');
    padding-left: 10px;
    padding-right: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
    width: 100px;

  }

  .foot_box {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding-left: 10px;
    padding-right: 10px;
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    height: 70px;

    .tuidan {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      color: #191919;
      width: 60px;
      height: 30px;
      font-size: 14px;
    }

    .tuidan2 {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      color: #191919;
      width: 40px;
      height: 30px;
      font-size: 14px;
    }

    .dadianhua {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      background-color: #FFF9F9; /* 填充颜色 */
      border: 1px solid #FF4142; /* 边框颜色和宽度 */
      border-radius: 50px; /* 圆角大小 */
      width: 80px; /* 宽度可自定义 */
      height: 40px;
      text-align: center;
      font-family: sans-serif;
      color: #FF4142;
      font-size: 14px;
      font-weight: bold;
      margin-left: 6px;
    }

    .buttons {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: start;
      flex: 1;

      .hetong {
        margin-left: 8px;
        display: flex;
        flex: 1;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background-color: #FF4142; /* 填充颜色 */
        border: 1px solid #FF4142; /* 边框颜色和宽度 */
        border-radius: 50px; /* 圆角大小 */
        width: 80px; /* 宽度可自定义 */
        height: 40px;
        text-align: center;
        font-family: sans-serif;
        color: white;
        font-size: 14px;
        font-weight: bold;
      }

      .hetong2 {
        margin-left: 8px;
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #FF4142; /* 填充颜色 */
        border: 1px solid #FF4142; /* 边框颜色和宽度 */
        border-radius: 50px; /* 圆角大小 */
        width: 80px; /* 宽度可自定义 */
        height: 40px;
        text-align: center;
        font-family: sans-serif;
        color: white;
        font-size: 14px;
        font-weight: bold;

        .dqs {
          font-size: 12px;
          font-weight: normal;
        }
      }
    }
  }

}

</style>